<template>
  <diy-container
    :status="pageStatus"
    :border-bottom="false"
    :color="pageDetail.color"
    ref="container"
    :title="pageDetail.title"
    :headerVisable="true"
    :headerBackGroudColor="pageDetail.backgroundColor"
    :headerBackgroundImage="pageDetail.backgroundImage"
    :tabbarIsShow="false"
    :isShowLeft="true"
  >
    <view class="content-list">
      <view class="marker">
        <view class="text">年龄范围：</view>
        <uni-data-select
          placeholder="请选择"
          v-model="user.status"
          :localdata="status"
          @change="change()"
        ></uni-data-select>
      </view>
      <view class="marker">
        <view class="text">身高：</view>
        <uni-data-select
          placeholder="请选择"
          v-model="user.height"
          :localdata="height"
          @change="change()"
        ></uni-data-select>
      </view>
      <view class="marker">
        <view class="text">月收入：</view>
        <uni-data-select
          placeholder="请选择"
          v-model="user.money"
          :localdata="money"
          @change="change()"
        ></uni-data-select>
      </view>
      <view class="marker">
        <view class="text">学历：</view>
        <uni-data-select
          placeholder="请选择"
          v-model="user.rope"
          :localdata="rope"
          @change="change()"
        ></uni-data-select>
      </view>
      <view class="marker">
        <view class="text">婚姻状态：</view>
        <uni-data-select
          placeholder="请选择"
          v-model="user.stus"
          :localdata="stus"
          @change="change()"
        ></uni-data-select>
      </view>
      <view class="title">希望TA</view>
      <view class="list-box">
        <view
          v-for="(item, index) in list"
          :key="index"
          @click="choice(index)"
          :class="[item.selected ? 'selde' : 'noselde']"
        >
          {{ item.selected ? item.title : item.title }}
        </view>
      </view>
    </view>
    <view class="config">
      <view class="btn" @click="getSave()">提交</view>
    </view>
  </diy-container>
</template>

<script>
import UrbanAreas from "../../components/urban-areas/urban-areas.vue";
export default {
  components: {
    UrbanAreas
  },
  data() {
    return {
      list: [
        { selected: false, title: "品味出众" },
        { selected: false, title: "喜欢厨艺" },
        { selected: false, title: "不冷暴力" },
        { selected: false, title: "重视家庭" },
        { selected: false, title: "整洁干净" },
        { selected: false, title: "阳光运动" },
        { selected: false, title: "文艺范" },
        { selected: false, title: "懂得尊重" },
        { selected: false, title: "低调沉稳" },
        { selected: false, title: "心地善良" },
        { selected: false, title: "浪漫主义" },
        { selected: false, title: "乐观积极" },
        { selected: false, title: "成熟稳重" },
        { selected: false, title: "爱情专一" },
        { selected: false, title: "真诚靠谱" },
        { selected: false, title: "风趣幽默" },
        { selected: false, title: "温柔体贴" },
        { selected: false, title: "有责任心" },
        { selected: false, title: "有上进信" },
        { selected: false, title: "孝敬父母" }
      ],
      pageDetail: {
        title: "择偶要求",
        backgroundColor: "#ffffff",
        color: "rgb(51, 51, 51)",
        backgroundImage: ""
      },
      user: {
        status: "",
        height: "",
        money: "",
        rope: "",
        stus: "",
        selectId: []
      },
      status: [
        { value: 0, text: "20-25" },
        { value: 1, text: "25-30" },
        { value: 2, text: "30-35" },
        { value: 3, text: "35-40" },
        { value: 4, text: "40-45" },
        { value: 5, text: "45-50" }
      ],
      height: [
        { value: 0, text: "不限" },
        { value: 1, text: "150-155" },
        { value: 2, text: "155-160" },
        { value: 3, text: "160-165" },
        { value: 4, text: "165-170" },
        { value: 5, text: "170-175" },
        { value: 6, text: "175-180" }
      ],
      money: [
        { value: 0, text: "3千以下" },
        { value: 1, text: "3千~5千" },
        { value: 2, text: "5千~8千" },
        { value: 3, text: "8千~1.2万" },
        { value: 4, text: "2万~5万" },
        { value: 5, text: "5万以上" }
      ],
      rope: [
        { value: 0, text: "中专" },
        { value: 1, text: "高中" },
        { value: 2, text: "专科" },
        { value: 3, text: "本科" },
        { value: 4, text: "硕士" },
        { value: 5, text: "博士" }
      ],
      stus: [
        { value: 0, text: "未婚" },
        { value: 1, text: "离异未育" },
        { value: 2, text: "离异带孩" },
        { value: 3, text: "离异孩跟对方" },
        { value: 4, text: "丧偶" }
      ]
    };
  },
  onLoad() {
    this.getDiamondData();
  },
  methods: {
    getDiamondData() {
      this.showPageContent();
    },
    change() {},
    choice(index) {
      //当再次被选中时，取消当前选中项
      if (this.list[index].selected == true) {
        this.list[index].selected = false;
        //取消选中时删除数组中的值
        for (var i = 0; i < this.user.selectId.length; i++) {
          if (this.user.selectId[i] === this.list[index].title) {
            this.user.selectId.splice(i, 1);
          }
        }
        this.selectList = this.user.selectId;
        console.log("选中的值", this.user.selectId);
      } else {
        this.list[index].selected = true;
        this.user.selectId.push(this.list[index].title);
        for (var i = 0; i < this.user.selectId.length; i++) {
          console.log("选中的值", this.user.selectId[i]);
        }
        this.selectList = this.user.selectId;
        console.log("选中的值", this.user.selectId);
      }
    }
  }
};
</script>

<style lang="scss">
.content-list {
  background-image: url("../../static/images/icon_sys_site_bg.png");
  background-repeat: no-repeat;
  background-size: 100%;
  height: 100vh;
  padding: 0 20px;
  .marker {
    display: flex;
    border-bottom: 1rpx solid #ededed;
    .text {
      line-height: 90rpx;
      font-size: 28rpx;
      color: #333;
      width: 200rpx;
      text-align: left;
    }
  }
  /deep/.uni-select {
    border-radius: 0;
    border: none;
    width: 520rpx;
    font-size: 30rpx;
    height: 90rpx;
    text-align: right;
    .uni-select__input-text {
      padding-right: 20rpx;
      color: #666;
      font-size: 28rpx;
    }
    .uni-select__input-placeholder {
      font-size: 28rpx;
      color: #666;
      padding-right: 20rpx;
    }
  }
}
.config {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 750rpx;
  height: 150rpx;
  background: #ffffff;
  .btn {
    width: 678rpx;
    height: 80rpx;
    background: linear-gradient(94deg, #ed4733 0%, #f46132 100%);
    border-radius: 200rpx 200rpx 200rpx 200rpx;
    font-size: 28rpx;
    color: #ffffff;
    line-height: 80rpx;
    text-align: center;
    margin: 24rpx 0 0 36rpx;
  }
}
.title {
  font-size: 28rpx;
  color: #333;
  margin-top: 25rpx;
}
.list-box {
  display: flex;
  flex-wrap: wrap;
  font-size: 26rpx;
  view {
    padding: 8rpx 20rpx;
    text-align: center;
    margin-top: 20rpx;
    &:not(:nth-child(4n)) {
      margin-right: calc(10% / 2);
    }
  }
}
/* 已选择 */
.selde {
  border: 1px solid #ffe5ea;
  background: #ffe5ea;
  color: #ff6686;
  border-radius: 30rpx;
  font-size: 20rpx;
  padding: 0 10rpx;
}

/* 未选择 */
.noselde {
  border: 1px solid #f7f7f7;
  background: #f7f7f7;
  color: #666;
  border-radius: 30rpx;
  font-size: 20rpx;
  padding: 0 10rpx;
}
.valueList {
  margin-top: 20rpx;
  padding: 20rpx;
  display: flex;
  justify-content: center;
}
</style>
